<template>
  <q-card flat>
    <q-item dense class="q-px-sm">
      <q-item-section>
        <div class="row items-center">
          <div>
            <q-icon size="24px" color="light-blue-3" name="topic"></q-icon>
          </div>
          <div class="q-pl-sm">话题热榜</div>
        </div>
      </q-item-section>

      <q-item-section class="col-auto">
        <q-btn dense color="" round flat icon="arrow_forward" to="/topic" />
      </q-item-section>
    </q-item>

    <q-separator />
    <q-item
      clickable
      dense
      class="q-px-sm"
      :to="'/topic/' + item.id"
      v-for="item in rows"
      :key="item.id"
    >
      <q-item-section>
        <div class="row items-center">
          <div class="q-pl-sm col text-blue-5 line-clamp-1">#{{ item.content }}#</div>
          <div class="q-pl-sm">
            <q-chip class="text-blue-6" dense>
              <q-icon name="local_fire_department" />
              <span>{{ item.readNum }}</span>
            </q-chip>
          </div>
        </div>
      </q-item-section>
    </q-item>
  </q-card>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { mainHotTopic } from 'src/service/api'
import { onActivated, onMounted } from 'vue'
import { ref } from 'vue'

const rows = ref<ApiType<typeof mainHotTopic>['Return']>([])

const f5 = async () => {
  const { data, error } = await mainHotTopic()
  if (error) {
    return
  }
  rows.value = data
}

onMounted(() => {
  f5()
})

onActivated(() => {
  f5()
})
</script>

<style scoped></style>
